<template>
    <div id='' class='department_content'>
        <div class="button_header">
            <Button type="primary" @click="add">新增</Button>
        </div>
        <div class="table_content">
            <Table row-key="id" :columns="columns" :load-data="handleLoadData" :data="list" border>
                <template slot-scope="{ row, index }" slot="action">
                    <a type="text" @click="edit(row)">编辑</a>
                    <Divider type="vertical" />
                    <a type="text" @click="remove(row)">删除</a>
                </template>
            </Table>
        </div>
        <Modal v-model="modalShow" width="1200" :mask-closable="false" :title="modalTitle">
            <components v-if="modalShow" :is="comps" ref="coms" />
            <div slot="footer">
                <Button type="text" @click="cancel">取消</Button>
                <Button type="primary" @click="ok">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import { columns } from './department/table_config'
import addUpdata from "./department/add-updata.vue";
export default {
    name: '',
    props: [''],
    data() {
        return {
            columns: columns,
            list: [],
            search: {}, // 查询配置对象
            comps: addUpdata,
            modalShow: false,
            modalTitle: '',
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        this.getDepTree()
    },
    methods: {
        getDepTree(pid = '0', cb) {
            this.$http.$get('deptBufferTree', { params: { pid: pid } }).then(res => {
                if (res.code == 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        const element = res.data[i];
                        if (element.hasChildren) {
                            element['children'] = []
                            element['_loading'] = false
                        } else {
                            delete element['children']
                            delete element['_loading']
                        }
                    }
                    if (cb) {
                        cb(res.data)
                    } else {
                        this.list = res.data;
                    }
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        handleLoadData(item, callback) {
            this.getDepTree(item.id, (res) => {
                callback(res)
            })
        },
        add(row) {
            this.modalShow = true
            this.modalTitle = '新增'
        },
        edit(row) {
            this.modalShow = true
            this.modalTitle = '编辑'
            this.$nextTick(() => {
                this.$refs.coms.setData(row)
            })
        },
        ok() {
            this.$refs.coms.getForm((formRes) => {
                this.modalShow = false
                this.modalTitle = ''
                this.getDepTree()
            })
        },
        cancel() {
            this.modalShow = false
            this.modalTitle = ''
        },
        remove(row) {
            this.$Modal.confirm({
                title: '删除确认',
                content: '确认删除该条数据？',
                onOk: () => {
                    this.$http.$post('deptRemove', { data: [row.id] }).then(res => {
                        if (res.code == 200) {
                            this.$Message.success('删除成功');
                            this.getDepTree()
                            return
                        }
                        this.$Message.error(res.msg);
                    })
                },
            });
        },
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.department_content {
    background-color: #fff;
    padding: 0 20px;
    width: 100%;
    height: 800px;
    .button_header {
        height: 48px;
        display: flex;
        align-items: center;
    }
    .table_content {
        height: 752px;
        overflow: auto;
    }
}
</style>